<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-11 21:21:30
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-07-20 00:04:35
-->
<template>
  <div class="page-wrapper">
    <div class="toolbar">
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>实时监测</a-breadcrumb-item>
          <a-breadcrumb-item>污染源</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <a-space>
        <a-radio-group
          buttonStyle="solid"
          v-model:value="queryType"
          @change="queryList"
        >
          <a-radio-button value="gas"> 废气排口 </a-radio-button>
          <a-radio-button value="water"> 废水排口 </a-radio-button>
          <a-radio-button value="voc"> VOC排口 </a-radio-button>
        </a-radio-group>
        <a-button type="primary" @click="onHandleCreate" v-auth="'Create'">
          <template #icon>
            <PlusOutlined />
          </template>
          添加
        </a-button>
        <a-button type="primary" :loading="loading" @click="queryList">
          <template #icon>
            <SyncOutlined />
          </template>
          刷新
        </a-button>
        <!-- <a-button type="primary">
            <template #icon>
              <ExportOutlined />
            </template>
            导出
          </a-button> -->
      </a-space>
    </div>
    <div class="container">
      <div class="table">
        <a-table
          bordered
          sticky
          :columns="columns"
          :row-key="(record) => record.id"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  PlusOutlined,
  ExportOutlined,
  SyncOutlined,
  EditOutlined,
  DeleteOutlined,
  SmileOutlined,
} from "@ant-design/icons-vue";
import { useListPage } from "@/helpers/pages";
import { computed, h, onMounted, ref } from "vue";
import { PaginationConfig } from "ant-design-vue/es/pagination";
import api from "@/api";
import {
  Button,
  ButtonGroup,
  message,
  Popconfirm,
  Switch,
} from "ant-design-vue";
const {
  loading,
  dataSource,
  pagination,
  popupModel,
  createQueryModel,
  onHandleCreate,
  onHandleUpdate,
} = useListPage<any, string>({});

const queryType = ref("gas");

const columns = computed(() => {
  if (queryType.value == "gas") {
    return [
      {
        dataIndex: "enterName",
        title: "序号",
        customRender({ index }) {
          return index + 1;
        },
        align: "center",
        width: 50,
      },
      {
        dataIndex: "enterName",
        title: "企业名称",
        align: "center",
      },
      {
        dataIndex: "stationName",
        title: "排口名称",
        align: "center",
      },
      {
        dataIndex: "state",
        title: "排口状态",
        align: "center",
        customRender() {
          return "正常";
        },
      },
      {
        dataIndex: "dt",
        title: "时间",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a34013",
        title: "	烟尘(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "ZSa34013",
        title: "	烟尘折算(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a21026",
        title: "二氧化硫(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "ZSa21026",
        title: "二氧化硫折算(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a21002",
        title: "氮氧化物(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "ZSa21002",
        title: "氮氧化物折算(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a00000",
        title: "废气流量(m³/S)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01011",
        title: "烟气流速(m/S)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01012",
        title: "烟气温度(℃)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a05001",
        title: "二氧化碳(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a21028",
        title: "硫化氢(mg/m³)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
    ];
  } else if (queryType.value == "water") {
    return [
      {
        dataIndex: "enterName",
        title: "序号",
        customRender({ index }) {
          return index + 1;
        },
        align: "center",
        width: 50,
      },
      {
        dataIndex: "enterName",
        title: "企业名称",
        align: "center",
      },
      {
        dataIndex: "stationName",
        title: "排口名称",
        align: "center",
      },
      {
        dataIndex: "state",
        title: "排口状态",
        align: "center",
        customRender() {
          return "正常";
        },
      },
      {
        dataIndex: "dt",
        title: "时间",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "w21003",
        title: "	氨氮(mg/l)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "w00000",
        title: "	废水流量(L/S)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "w01001",
        title: "pH值(无量纲)",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
    ];
  } else {
    return [
      {
        dataIndex: "enterName",
        title: "序号",
        customRender({ index }) {
          return index + 1;
        },
        align: "center",
        width: 50,
      },
      {
        dataIndex: "enterName",
        title: "企业名称",
        align: "center",
      },
      {
        dataIndex: "stationName",
        title: "排口名称",
        align: "center",
      },
      {
        dataIndex: "state",
        title: "排口状态",
        align: "center",
        customRender() {
          return "正常";
        },
      },
      {
        dataIndex: "dt",
        title: "时间",
        align: "center",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a24088",
        align: "center",
        title: "非甲烷总烃(mg/m³)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a25002",
        align: "center",
        title: "苯",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a05002",
        align: "center",
        title: "甲烷(ng/m3)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a24087",
        align: "center",
        title: "总烃(mg/m³)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a25003",
        align: "center",
        title: "甲苯(mg/m³)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a25005",
        align: "center",
        title: "二甲苯(mg/m³)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a30001",
        align: "center",
        title: "甲醇(mg/m³)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "w25043",
        align: "center",
        title: "苯并[α]芘(ug/l)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a00000",
        align: "center",
        title: "废气流量(mg/m³)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01001",
        align: "center",
        title: "温度(℃)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01002",
        align: "center",
        title: "湿度(%)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01006",
        align: "center",
        title: "气压(kPa)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01007",
        align: "center",
        title: "风速(m/s)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01008",
        align: "center",
        title: "风向",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01012",
        align: "center",
        title: "烟气温度(m/s)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01013",
        align: "center",
        title: "烟气压力(kPa)",
        customRender({ value }) {
          return value || "--";
        },
      },
      {
        dataIndex: "a01014",
        align: "center",
        title: "烟气湿度(%)",
        customRender({ value }) {
          return value || "--";
        },
      },
    ];
  }
});

const onDeleteItem = async (item: any) => {
  let callback = message.loading("数据操作中，请稍后");
  setTimeout(() => {
    callback();
    queryList();
  }, 1000);
};

const queryList = async () => {
  loading.value = true;
  let res = await api.get(
    "/data/real-data/source-" + queryType.value + ".json"
  );
  dataSource.value = res.items;
  pagination.total = res.totalCount;
  loading.value = false;
};

const handleTableChange = (pageConfig: PaginationConfig, filters: any) => {
  pagination.current = pageConfig.current;
  queryList();
};

onMounted(() => {
  queryList();
});
</script>

<style lang="less" scoped></style>
